<template>
    <div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="开始事件" name="first">
          <el-form-item label="编号" v-show="false">
              <el-input v-model="id" style="margin-bottom: 5px;"></el-input>
          </el-form-item>
          <el-form-item label="名称">
              <el-input v-model="name" style="margin-bottom: 5px;"></el-input>
          </el-form-item>
          <el-form-item label="表单ID">
              <el-input v-model="formKey" style="margin-bottom: 5px;"></el-input>
          </el-form-item>
          <el-form-item label="文档"  style="margin-bottom: 5px;">
              <el-input type="textarea" v-model="documentation"></el-input>
          </el-form-item>
          <el-form-item label="启动流程的人的id" v-show="false">
              <el-input v-model="initiator"></el-input>
          </el-form-item>
        </el-tab-pane>

        <!--<el-tab-pane label="表单" name="second">
            <el-table
                :data="formPropList"
                style="width: 100%; margin-top: 5px;"
                :border="true"
                @row-click="formPropClick"
            >
                <el-table-column prop="id" label="Id"/>
                <el-table-column prop="name" label="列名"/>
                <el-table-column label="操作">
                    <el-button @click="delFormProp">删除</el-button>
                </el-table-column>
            </el-table>

            <el-form inline label-width="100px" style="padding: 10px;">
                <el-form-item label="ID">
                    <el-input v-model="formProp.id"/>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="formProp.name"/>
                </el-form-item>
                <el-form-item label="类型">
                    <el-input v-model="formProp.type"/>
                </el-form-item>
                <el-form-item label="日期模式">
                    <el-input v-model="formProp.datePattern"/>
                </el-form-item>
                <el-form-item label="表达式">
                    <el-input v-model="formProp.expression"/>
                </el-form-item>
                <el-form-item label="变量">
                    <el-input v-model="formProp.variable"/>
                </el-form-item>
                &lt;!&ndash;<el-checkbox-group>
                    <el-checkbox-button label="必填"/>
                    <el-checkbox-button label="可读"/>
                    <el-checkbox-button label="可写"/>
                </el-checkbox-group>&ndash;&gt;
                <br/>
                <el-button @click="addFormProp">新增</el-button>
                <el-button @click="updateFormProp">编辑</el-button>
            </el-form>
        </el-tab-pane>-->
      </el-tabs>
    </div>
</template>
<script>
import elementHelper from "@/views/flow/act/edit-modeler/js/helper/ElementHelper";

export default {
    props: ['element'],
    inject: ['bpmnModeler'],
    data(){
        return {
            activeName: 'first',
            id : this.element.id || '',
            name: '',
            formKey:'',
            formFields:'',
            documentation:'',
            initiator: '',
            //formPropList: [],
            formProp:{}
        }
    },

    watch: {
        id (newVal, oldVal) {
            const bpmnModeler = this.bpmnModeler();
            const modeling = bpmnModeler.get('modeling')
            modeling.updateProperties(this.element,{
                id: newVal
            })
        },
        name (newVal, oldVal) {
            const bpmnModeler = this.bpmnModeler();
            const modeling = bpmnModeler.get('modeling')
            modeling.updateProperties(this.element,{
                name: newVal
            })
        },
        formKey:{
            handler(newVal,oldVal){
                const bpmnModeler = this.bpmnModeler();
                const modeling = bpmnModeler.get('modeling')
                modeling.updateProperties(this.element,{'formKey':newVal});
            }
        },
        element: {
            deep: true,
            immediate: true,
            handler(newVal, oldVal) {
                if(newVal.type === 'bpmn:StartEvent') { // 防止修改其他子组件的属性
                    const businessObject = newVal.businessObject;
                    this.name = businessObject.name;
                    this.formKey = businessObject.get('formKey');
                    console.log(businessObject)
                    console.log(this.name)
                    console.log(this.formKey)
                }
            },
        },
    },
    methods:{
        /*addFormProp() {
            let prop = {};
            Object.assign(prop, this.formProp)
            this.formPropList.push(prop)
            this.formProp = {}
            this.appendFieldToFormElement()
        },
        updateFormProp() {
            this.formPropList.forEach(item=>{
                if (item.id==this.formProp.id) {
                    Object.assign(item, this.formProp)
                }
            })
            this.appendFieldToFormElement()
        },
        delFormProp() {
            this.formPropList = this.formPropList.filter(item=>(item.id!=this.formProp.id))
            this.appendFieldToFormElement()
        },
        formPropClick(prop){
            this.formProp = Object.assign({}, prop)
        },
        appendFieldToFormElement() {
            if (this.element && this.element.businessObject && this.element.businessObject.extensionElements && this.element.businessObject.extensionElements.values) {
                this.element.businessObject.extensionElements.values = []
                this.formPropList.forEach(prop=>{
                    let field = elementHelper.createElement('activiti:FormProperty', null, this.element, this.bpmnModeler().get('bpmnFactory'));
                    field.id = prop.id
                    field.type = prop.type
                    field.name = prop.name
                    this.element.businessObject.extensionElements.values.push(field)
                })
            }
        },
        getFieldValueFromXml() {
            let formPropList = []
            if (this.element && this.element.businessObject && this.element.businessObject.extensionElements && this.element.businessObject.extensionElements.values) {
                this.element.businessObject.extensionElements.values.forEach(field => {
                    let prop = {};
                    Object.assign(prop, field);
                    formPropList.push(prop);
                })
            }
            return formPropList
        },*/

    }
}
</script>
<style>

</style>
